@use "../../colors";

.youtbe-video-button {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    width: 13.125rem;

    .thumbnail {
        position: relative;
        width: 100%;

        img {
            position: relative;
            width: 100%;
            border-radius: 12px;
        }

        .duration {
            position: absolute;
            z-index: 1;
            bottom : 0.5rem;
            right: 0;

            margin: 0.5rem;
            padding: 0.25rem;
            border-radius: 4px;
            background-color: colors.$overlay-gray;
            color: colors.$type-white;

            font-size: 0.75rem;
            font-weight: 500;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    }

    .video-info {
        margin-right: 1.5rem;
        text-align: start;

        .video-title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-height: 1.2rem;
            max-height: 2.4rem;

            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 600;
            font-size: 0.875rem;
            color: black;
        }

        .video-metadata {
            margin: 0.5rem 0 0.25rem 0;

            color: colors.$ui-dark-gray;
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1.125rem;
        }
    }

    &:hover {
        cursor: pointer;
    }
}